<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<meta name="format-detection" content="telephone=no" /> 
<link rel="shortcut icon" href="images/logo.ico" />
<title>闪度生活</title>
<meta name="keywords" content=" " />
<meta name="description" content=" " />


<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/swiper-3.4.1.min.css">
<link rel="stylesheet" type="text/css" href="css/iosSelect.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css">

<style tyle="">
    
</style>

<script>
        var _hmt = _hmt || [];
        (function() {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?b25bf95dd99f58452db28b1e99a1a46f";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
        })();
</script>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/easing.js"></script>
<script src="js/swiper-3.4.1.min.js"></script>
<script src="js/index.js"></script>
<script src="js/main.js"></script>

<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/axios-config.js"></script>
<script src="./js/js.cookie.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/layui/layui.js"></script>

<style>
  .stroy_join_sec4_list{
    position: relative;
    display: inline-block;
  }
  .stroy_join_sec4_list input{
    position: absolute;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
    z-index: 10;
  }
  #picUpDemo img{
      width: 25%;
  }
  .layui-upload-list{
      margin: 10px 0;
      padding: 0 15px;
  }

    .pic{
        width: 100px;
        height: 100px;
        display: inline-block;
        margin-right:0.05rem;
        margin-bottom: 0.05rem;
    }
    .pic img {
        width: 100%;
        height: 100%;
    }
    .stroy_join_sec4{
      position: relative;
    }
    .addElement{
      display: inline-block;
      vertical-align: top;
      /*position: absolute;
      top:0.25rem;
      left:0.15rem;*/
    }
</style>

</head>

<body class="bg-2">

<div id="app" v-cloak>
<form id= "uploadForm">

<!--  / header  -->
<div class="stroy_rhead">
  <a href="javascript:history.go(-1)" class="back">
    <img src="images/hl.png"> 返回
  </a>
  <h5>撰写老故事</h5>
  <a class="offside" href="javascript:void(0);" style="font-size: 0.15rem;" id="sendTale">
    <input type="button" value="发布" @click="goSubmit()" style="border:none;background:transparent;" />
  </a>

</div>

<!--  / header  -->
<!--  / warpper  -->
<div class="warpper warpper_padt">
	
	  <div class="stroy_join">
	  	<div class="stroy_join_list stroy_join_list3">
	  		发布类型
	  		<span>	  		
  	  		<div class="form-item item-line stroy_join_list1">                                  
  			    <div class="pc-box">                     
  			        <input type="hidden" name="bank_id" id="bankId" value="">                     
  			        <span id="showBank">匠心技艺</span>  
  			    </div>             
          </div>
  	  		<i class="fa fa-angle-right"></i>
        </span>
	  	</div>

	  	<div class="stroy_join_list stroy_join_list_city">
	  		所在城市
	  		<span>杭州<i class="fa fa-angle-right"></i></span>
	  	</div>
	  	
	  	<div class="stroy_join_list">
	  		故事标题
	  		<input type="text" placeholder="输入标题最多个12个字" v-model="title1">
	  	</div>

	  	<div class="stroy_join_sec4">
        <div class="addElement" id="addElement"></div>
	  		<div class="stroy_join_sec4_list" id="uploadImgBtn">
	  			<img src="images/xiangji.png" alt="">
	  			<br>
	  			<span>添加图片</span>
	  			<span>(最多6张)</span>
          <input name="file1" type="file" multiple="multiple" id="file">
	  		</div>
        
      </div>
          
      <!-- <div class="layui-upload">
          <div class="layui-upload-list" id="picUpDemo"></div>
      </div> -->

	  	<div class="stroy_join_sec5">
	  		<textarea placeholder="(在此处填写您的故事,限1200字以内)" class="commentArea1" v-model="collect1"></textarea>
	  	</div>	  	
    </div>

</div>
<!--  / warpper  -->
  

<!--  / footer  -->
<!--  / footer  -->
</form>

</div>


</body>
<script src="js/bank.js"></script>
<script src="js/iosSelect.js"></script>
<script>
$(window).ready(function(){

    var vm = new Vue({
        el:"#app",
        data(){
          return{
            stroy_allList:[],
            title1:'',
            collect1:'',
            file1:'',
          }
        },
        created:function(){
          var $this = this;
        },
        mounted:function(){
            //   getData();
            //   imgSend();
            imgUpload();
        },
        methods:{

          goSubmit:function(){
            var $this = this;
            console.log($this.file1);
            var formData = new FormData();
            formData.append("token", getCookie("token"));
            formData.append("title", $this.title1);
            formData.append("city", sessionStorage.getItem("cityLocation"));
            formData.append("file", $this.file1[0]);
            formData.append("cate_id", 1);
            formData.append("collect", $this.collect1);
            // console.log($('#file')[0].files);
            $.ajax({  
                 url: 'http://shandu.unohacha.com/Api/Oldstory/issue',  
                 type: 'post',  
                 data: formData,  
                 cache: false,
                 processData: false,
                 contentType: false,
                 async: false
            }).done(function(res) {
                alert(res.info);                                                
            }).fail(function(res) {
                console.log("全部老故事列表:"+err);
            });
            // const data = {
            //     title:$this.title1,
            //     city:sessionStorage.getItem("cityLocation"),
            //     file:$this.file1,
            //     cate_id:'1',
            //     collect:$this.collect1,
            // }
            // console.log(formData);
            // Axios.post(window.Url.stroy_issue,formData).then((res) => {
              
            //   if(res.result == 1){
            //     alert(res);                                
            //   }else
            //   {
            //     console.log("全部老故事列表:"+res.info);
            //   }
              
            // }).catch((err) => {
            //   console.log("全部老故事列表:"+err);
            // })

          }
         
        }

    })

        function imgUpload(){
            //为外面的盒子绑定一个点击事件
            $("#uploadImgBtn").click(function(){
                /*
                1、先获取input标签
                2、给input标签绑定change事件
                3、把图片回显
                 */
                // 1、先回去input标签
                var $input = $("#file");
                // console.log($input)
                // 2、给input标签绑定change事件
                $input.on("change" , function(){
                    // console.log(this)
                    //补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
                    //获取选择图片的个数
                    var files = this.files;
                    var length = files.length;
                    // console.log("选择了"+length+"张图片");
                    //3、回显
                    $.each(files,function(key,value){
                        //每次都只会遍历一个图片数据
                        var div = document.createElement("div"),
                            img = document.createElement("img");
                        div.className = "pic";

                        var fr = new FileReader();
                        fr.onload = function(){
                            img.src=this.result;
                            div.appendChild(img);
                            var element=document.getElementById("addElement");
                            element.appendChild(div);
                        }
                        fr.readAsDataURL(value);
                    })
                    // console.log(files);
                    vm.file1=files;

                })

                //4、我们把当前input标签的id属性remove
                $input.removeAttr("id");
                //我们做个标记，再class中再添加一个类名就叫test
                var newInput = '<input class="uploadImg test" type="file" name="file" multiple id="file">';
                $(this).append($(newInput));

            })
        }


        // function upload(){
        //     /**
        //      * 我们存一下this对象，
        //      * 我们将在ajax的回调函数中，
        //      * 将要用这个对象，
        //      * 用它来改变父盒子的背景图
        //      *
        //      */
        //     var self = this;
        //     //如果不理解我写的，可以看看我的前几篇文章
        //     $.ajax({
        //         url: "/UpImg/upload",
        //         type: "post",
        //         dataType: "json",
        //         cache: false,
        //         data: new FormData($("#formTag1")[0]),
        //         processData: false,// 不处理数据
        //         contentType: false, // 不设置内容类型
        //         success: function(data){
        //             /*
        //                 后端返回的数据格式为
        //                 {"url": "xxxxxx"}
        //              */
        //             $(self).parent().css({
        //                 "background-image": "url("+data.url+")"
        //             })
        //         }

        //     })
        // }        
    
  $('.stroy_join_list_city').click(function(){
  		window.location.href = "search.html";
  });
}) 

function doUpload() {  
    var formData = new FormData();
    formData.append("token", getCookie("token"));
    formData.append("title", "fhg");
    formData.append("city", "杭州");
    formData.append("file", $('#file')[0].files[0]);
    formData.append("cate_id", 1);
    formData.append("collect", "sgkfgfg");
    console.log(formData.file);
    $.ajax({  
         url: 'http://shandu.unohacha.com/Api/Oldstory/issue',  
         type: 'post',  
         data: formData,  
         cache: false,
         processData: false,
         contentType: false,
         async: false
    }).done(function(res) {
        
    }).fail(function(res) {
        
    });
} 
</script>


</html>
